<template>
  <div class="menu-demo"  :style="{ padding: '20px' }">
    <a-menu mode="horizontal" :default-selected-keys="['1']">
      <a-menu-item key="1">PHP项目</a-menu-item>
      <a-menu-item key="2">Python项目</a-menu-item>
      <a-menu-item key="3">Node.js项目</a-menu-item>
      <a-menu-item key="4">其他项目</a-menu-item>
    </a-menu>
  </div>
</template>

<script>
import { Modal, Button } from "@arco-design/web-vue";
import { ref } from "vue";
import axios from "axios";
import { onMounted } from "vue";
export default {
  setup() {
    function get_status() {
      axios
        .get("/api/get/port_rules")
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    }
    onMounted(() => {
      get_status();
    });
  },
  components: {
    Modal,
    Button,
  },

};
</script>

<style scoped>
.menu-demo {
  box-sizing: border-box;
  width: 100%;
  padding: 40px;
  height: 100%;
}
</style>
